<template>
    <div class="wrapper">
        <div class="checkBox">
            <input type="checkbox"
                   :checked="isChecked"
                   @change="chnage_select"/>
        </div>
        <div class="boig_image">
            <img :src="d_item.design.image.url" alt="">
        </div>
        <div class="profile">
            <div class="h1">{{d_item.design.title}}</div>
            <div class="desc item">
                <div class="label">产品：</div>
                <div class="contetn">{{d_item.fabric.name}} (布宽{{d_item.fabric.width}}米)</div>
            </div>
            <div class="priceWrapperItem item">
                <div class="label">单价：</div>
                ￥ {{d_item.fabric.unitPrice}}
            </div>
            <div class="item numberWrapperItem">
                <div class="label">数量：</div>
                <div class="numberWrapper">
                    <SvgIcon icon="icon-jian" class="icon"
                             @click.native="down_number"
                    ></SvgIcon>
                    <input type="number" :value="d_item.quantity"/>
                    <SvgIcon icon="icon-plus "
                             @click.native="up_number"
                             class="icon"></SvgIcon>
                </div>
                <div class="delete" @click="delete_shopcaretItems">删除</div>
            </div>
        </div>
    </div>
</template>
<script>

    import withStore from "../../../vuex/withStore";
    import SvgIcon from '../../../components/svgIcon'
    import {isInArray} from "./utils";
    import {delete_shopcart} from "../service";
    import myalert from "../../../utils/myalert";

    export default withStore({
        props: ["item"],
        computed: {
            isChecked() {
                var a = isInArray(this.$store.state.shopcart.shopcartItems, this.item)
                return a
            }
        },
        methods: {
            down_number() {
                var self = this
                if (this.d_item.quantity > 1) {
                    this.d_item.quantity = this.d_item.quantity - 1
                    var shopcartItems = this.$store.state.shopcart.shopcartItems
                    var index = shopcartItems.findIndex(item => item.objectId == self.d_item.objectId)
                    shopcartItems[index].quantity = this.d_item.quantity
                    this.setStore("shopcart.select_array", shopcartItems)
                }
            },
            up_number() {
                var self = this
                this.d_item.quantity = this.d_item.quantity + 1
                var shopcartItems = this.$store.state.shopcart.shopcartItems
                var index = shopcartItems.findIndex(item => item.objectId == self.d_item.objectId)
                shopcartItems[index].quantity = this.d_item.quantity
                this.setStore("shopcart.select_array", shopcartItems)
            },
            chnage_select(e) {
                var item = this.$data.d_item
                var shopcartItems = this.$store.state.shopcart.select_array
                if (e.target.checked) {
                    /*push*/
                    shopcartItems.push(item)
                    this.setStore("shopcart.select_array", shopcartItems)
                } else {
                    // delete
                    var index = shopcartItems.findIndex(_item => item.objectId == _item.objectId)
                    if (index >= 0) {
                        shopcartItems.splice(index, 1)
                        this.setStore("shopcart.select_array", shopcartItems)
                    }
                }
            },
            async delete_shopcaretItems() {
                var self = this
                /*delete */
                myalert.confirm().then(res => {
                    delete_shopcart(self.d_item)
                    var shopcartItems = self.$store.state.shopcart.select_array
                    var index = shopcartItems.findIndex(item => item.objectId == self.d_item.objectId)
                    shopcartItems.splice(index, 1)
                    setTimeout(() => {
                        self.setStore("shopcart.select_array", shopcartItems)
                        self.setStore("shopcart.shopcartItems", shopcartItems)
                    }, 300)

                })

            }
        },
        data() {
            return {
                d_item: this.$props.item

            }
        },
        components: {SvgIcon}
    })
</script>
<style lang="less" scoped>
    .wrapper {
        height: px2rem(220);
        border: 1px solid #eee;
        margin-left: px2rem(20);
        margin-right: px2rem(20);
        border-radius: 10px;
        margin-top: 10px;
        display: flex;
        padding-top: px2rem(8);
        .checkBox {
            display: flex;
            align-items: center;
        }
        .boig_image {
            width: px2rem(200);
            height: px2rem(200);
            img {
                height: 100%;
                width: 100%;
            }
        }
        .profile {
            flex: 1;
            padding-left: 5px;
            .h1 {
                font-weight: 600;
            }
            .item {
                display: flex;
                &.priceWrapperItem {
                    margin-top: 10px;

                }
                &.numberWrapperItem {
                    margin-top: 5px;
                    padding-right: px2rem(20);
                    .delete {
                        margin-top: px2rem(5);
                    }
                }
                .numberWrapper {
                    flex: 1;
                    input {
                        width: px2rem(100);
                    }
                    .icon:first-child {
                        margin-right: 5px
                    }
                    .icon:last-child {
                        margin-left: 5px
                    }
                }
            }
        }
    }
</style>